<?php

use app\assets\AppAsset;

AppAsset::register($this);
AppAsset::addCss($this, 'css/layout-main.css');

/* @var $userInfo object */
/* @var $menu string */
?>
<div class="layout-wrapper" id="app" style="display: none" v-show="loadOver">
    <el-container class="main-container">
        <el-header class="no-padding header">
            <div :style="{width: leftMenuWidth + 'px'}" class="float-left">
                <div class="header-left" id="headerLeft">
                    <el-row>
                        <el-col :span="24">
                            <div class="collapse-btn logo-coll thumb" @click="openColMenu">
                                <img src="/images/logo.png" alt="">
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="float-left" :style="{width: 'calc(100% - ' + leftMenuWidth + 'px - 220px)'}">
                <el-row :inline="true">
                    <el-col :span="24" class="top-menu-wrapper">
                        <el-menu :default-active="topMenuIndex" class="el-menu-demo"
                                 mode="horizontal" background-color="#20a0ff"
                                 text-color="#a4cdf9" active-text-color="#ffffff"
                                 v-if="Object.keys(topMenuList).length > 1">
                            <el-menu-item v-for="(item, key) in topMenuList" :index="item['key']"
                                          @click="topTabClick(item['key'])" v-text="item['label']">
                            </el-menu-item>
                        </el-menu>
                        <div v-else>&nbsp;</div>
                    </el-col>
                </el-row>
            </div>
            <div class="header-right float-left">
                    <el-dropdown class="user-info">
                        <el-row class="no-font-size">
                            <div class="row">
                                <div class="user-avatar">
                                    <img src="<?=$userInfo->avatar?>">
                                </div>
                            </div>
                            <div class="row user-name text-more-ellipsis">
                                <span class="user-name-span">
                                   <?= $userInfo->nick_name ?>
                                </span>
                            </div>
                            <div class="row">
                                <span class="el-dropdown-link el-dropdown-selfdefine">
                                    <i class="el-icon-caret-bottom"></i>
                                </span>
                            </div>
                        </el-row>
                        <el-dropdown-menu slot="dropdown"
                                          class="balance-dropdown-wrapper">

                            <el-dropdown-item @click.native="clearAllCache">
                                <a class="do-button">
                                    <span class="icon-font icon-exit"></span>
                                    <span>清除缓存</span>
                                </a>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="loginOut">
                                <a class="do-button">
                                    <span class="icon-font icon-exit"></span>
                                    <span>退出</span>
                                </a>
                            </el-dropdown-item>

                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
        </el-header>
        <el-container>
            <el-aside id="menuSide" class="menuSide menu-header animated infinite"
                      :style="leftMenuStyle">

                <div class="content-container">
                    <el-scrollbar class="main-scroller">
                        <el-menu class="sidebar-el-menu"
                                 background-color="#242f42"
                                 text-color="#bfcbd9"
                                 :collapse="collapse"
                                 :default-active="activeTabIndex"
                                 :collapse-transition="true"
                                 :style="leftMenuStyle">

                            <el-submenu v-for="(item, key) in leftMenuList" :key="key"
                                        v-if="item['children'] && Object.keys(item['children']).length>0"
                                        :index="item['key']">
                                <template slot="title">
                                    <i :class="item.font_icon"></i>
                                    <span slot="title" v-text="item.label" class="menu-name"></span>
                                </template>
                                <el-menu-item :index="item_sub['key']"
                                              v-for="(item_sub, key_sub) in item.children"
                                              :key="key_sub" :data-path="key + '-' + key_sub"
                                              @click="leftMenuLink(item_sub)"
                                              v-text="item_sub.label">
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item :index="item.key" v-else
                                          @click="leftMenuLink(item)"
                                          :ll="item.children">
                                <i :class="item.font_icon" :style="getStyleIcon(item['key'])"></i>
                                <span slot="title" v-text="item.label"></span>
                            </el-menu-item>
                        </el-menu>
                    </el-scrollbar>
                </div>

            </el-aside>
            <el-main id="contentWrapper" class="no-padding content-box animated infinite">

                <div class="tab-wrapper" id="tabWrapper" style="display: none;" v-show="loadOver">
                    <el-row :gutter="0" :inline="true" class="do-button-inline left-do-wrapper">
                        <el-col :span="24" :offset="0">
                            <div class="tab-list">
                                <el-tabs type="card"
                                         v-model="activeTabIndex" id="tabDom"
                                         @contextmenu.native="showRightMenu($event)"
                                         :before-leave="tabClick"
                                         @edit="handleTabsEdit"
                                         @tab-click="addAdjoinTabClass">

                                    <el-tab-pane :key="key" v-for="(item, key) in tabList"
                                                 :label="item.label" :name="item.key"
                                                 :closable="item.route != indexUrl">

                                        <iframe width="100%" height="100%"
                                                :src="item.url" frameborder="0"
                                                class="content-frame" :data-key="key">
                                        </iframe>

                                    </el-tab-pane>
                                </el-tabs>
                            </div>
                        </el-col>
                    </el-row>
                    <div id="leftMenuWrapper" class="left-menu-wrapper" :style="rightClickStyle">
                        <div class="row font-second pointer" @click="openTabNewTab">
                            新标签打开
                        </div>
                        <div class="row font-second pointer" @click="reloadTab">
                            刷新当前选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeTabLeftMenu">
                            关闭当前选项卡
                        </div>
                        <div class="line"></div>
                        <div class="row font-second pointer" @click="closeOtherTabs">
                            关闭其他选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeRightAll">
                            关闭右侧全部选项卡
                        </div>
                        <div class="row font-second pointer" @click="closeLeftAll">
                            关闭左侧全部选项卡
                        </div>
                    </div>
                </div>

            </el-main>
        </el-container>
    </el-container>

    <!-- 更新缓存弹出层 -->
    <el-dialog title="更新缓存" :visible.sync="clearCache.showClearDialog"
               class="dialog-wrapper scroll-dialog dialog-small" :lock-scroll="true" width="40%"
               :append-to-body="true">

        <div v-loading="clearCache.showClearLoading" style="width: 100%;height: 100%;">
            <iframe :src="clearCache.pageUrl" class="clear-cache-iframe"
                    id="clearCacheIframe" ref="cacheIframe"></iframe>
        </div>

        <div slot="footer">
            <el-button size="mini" @click="clearCache.showClearDialog = false">关闭</el-button>
        </div>
    </el-dialog>
    <!-- 更新缓存弹出层 -->
</div>
<?= AppAsset::addScript($this, "@web/js/layout-main.js"); ?>

<?= $this->registerJs(
    "var menu = new MenuHeader('" . $menu . "');"
); ?>
